<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>文章分类</span>
        <el-button type="primary" size="mini" @click="addCateShowDialogBtnFn">添加分类</el-button>
      </div>
      <el-table style="width: 100%" :data="cateList" border stripe>
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="cate_name" label="分类名称"></el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"></el-table-column>
        <el-table-column label="操作">
          <!-- 作用域插槽  scope对象:{row:行对象}-->
          <template v-slot="scope">
            <el-button type="primary" size="mini" @click="updateCateBtnFn(scope.row)">修改</el-button>
            <!-- <el-popover
            placement="top"
            width="160"
            v-model="visible">
            <p>确定删除当前所选分类吗?</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini"  @click="deleteCateBtnFn(scope.row.id)">确定</el-button>
            </div>
            <el-button  slot="reference" type="danger" size="mini">删除</el-button>
          </el-popover> -->
            <el-button type="danger" size="mini" @click="deleteCateBtnFn(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加文章分类对话框
    .sync是Vue2.3版本新增
    .sync类似于v-model,可以给子组件实现双向数据绑定
    visible.sync:组件内检测到对话框关闭(点击蒙版,按esc,按右上角x),会回传给右侧变量
    vue2里.sync可以用多次-->
    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="50%"
    @close="dialogCloseFn"
    >
    <!-- 添加的表单 -->
    <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="80px">
      <el-form-item label="分类名称" prop="cate_name">
        <el-input v-model="addForm.cate_name"></el-input>
      </el-form-item>
      <el-form-item label="分类别名" prop="cate_alias">
        <el-input v-model="addForm.cate_alias"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"  @click="confirmFn">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import { getArtCateListAPI, addArtCateAPI, updateArtCateAPI, delArtCateAPI } from '@/api'
export default {
  name: 'art-cate',
  data () {
    return {
      cateList: [],
      dialogVisible: false,
      // ...其他
      addForm: { // 添加表单的数据对象
        cate_name: '',
        cate_alias: ''
      },
      addRules: { // 添加表单的验证规则对象
        cate_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }
        ],
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }
        ]
      },
      isEdit: false,
      editId: '', // 保存正在编辑的数据id值
      visible: false
    }
  },
  methods: {
    async getArtCateFn () {
      const { data: res } = await getArtCateListAPI()
      this.cateList = res.data
    },
    // 新增按钮点击事件
    addCateShowDialogBtnFn () {
      this.isEdit = false
      this.editId = ''
      this.dialogVisible = true
    },
    // 对话框确定点击事件
    confirmFn () {
      // 表单预校验
      this.$refs.addRef.validate(async valid => {
        if (valid) {
          if (this.isEdit) {
            // 要修改
            // this.addForm.id = this.editId
            // const { data: res } = await updateArtCateAPI(this.addForm)
            const { data: res } = await updateArtCateAPI({ id: this.editId, ...this.addForm })
            // console.log(res)
            if (res.code !== 0) return this.$message.error(res.message)
            this.$message.success(res.message)
          } else {
            // 调用接口传递数据给后台
            const { data: res } = await addArtCateAPI(this.addForm)
            if (res.code !== 0) return this.$message.error(res.message)
            this.$message.success(res.message)
          }
          // 重新请求列表数据
          this.getArtCateFn()
          // 清除表单
          this.$refs.addRef.resetFields()
          // 关闭对话框
          this.dialogVisible = false
        } else {
          return false
        }
      })
    },
    // 对话框取消
    dialogCloseFn () {
      this.$refs.addRef.resetFields()
    },
    // 更新分类(修改)
    updateCateBtnFn (obj) {
      this.isEdit = true
      this.editId = obj.id
      this.dialogVisible = true
      // dialog在第一次挂载el-form时,先用addForm空字符串初始值绑定到内部,后续用作resetFields重置
      // 让真实dom先创建并在内部绑定复制好初始值
      this.$nextTick(() => {
        // 数据回显
        this.addForm.cate_name = obj.cate_name
        this.addForm.cate_alias = obj.cate_alias
      })
    },
    // 删除分类
    async deleteCateBtnFn (id) {
      this.visible = false
      const { data: res } = await delArtCateAPI(id)
      if (res.code !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      // 重新请求列表数据
      this.getArtCateFn()
    }
  },
  created () {
    this.getArtCateFn()
  }
}
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
